<script setup lang="ts">
import { onMounted, ref } from 'vue';
import CTable from '@/components/table.vue'

// 
interface IData {
  // 待飞计划
  plan: string
  // 起降场
  takeoff: string
  // 飞行任务
  task: string
}

// 表格配置
const items = [
  {
    title: '待飞计划',
    key: 'plan'
  },
  {
    title: '起降场',
    key: 'takeoff'
  },
  {
    title: '飞行任务',
    key: 'task'
  },
]
const data = ref<IData[]>([])

onMounted(() => {
  // TODO: 接口

  data.value = [
  {
    plan: '06-12 09:55:21',
    takeoff: '浏阳河起降场',
    task: '浏阳河政务巡检'
  },
  {
    plan: '06-12 09:55:21',
    takeoff: '梅溪湖起降场',
    task: '医疗物流'
  },
  {
    plan: '06-12 09:55:21',
    takeoff: '梅溪湖起降场',
    task: '水域巡检'
  },
  {
    plan: '06-12 09:55:21',
    takeoff: '梅溪湖起降场',
    task: '梅溪湖物流速递'
  },
  {
    plan: '06-12 09:55:21',
    takeoff: '梅溪湖起降场',
    task: '医疗物流'
  },
  {
    plan: '06-12 09:55:21',
    takeoff: '梅溪湖起降场',
    task: '水域巡检'
  }
  ]
})

const emit = defineEmits(['open-modal'])
// 点击表格行
const handleTableRow = (row: IData) => {
  emit('open-modal', 'fxjh')
  console.log(row)
}
</script>

<template>
  <div class="ready">
    <div class="ready-header"></div>
    <div class="ready-content">
      <c-table :items="items" :data="data" @click="handleTableRow"></c-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ready {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: linear-gradient(287deg, rgba(2, 53, 115, 0.6) 10%, rgba(2, 53, 115, 0.4) 39%, rgba(41, 162, 255, 0.2) 113%);
  backdrop-filter: blur(4px);

  &-header {
    width: 100%;
    height: 74px;
    margin-top: -38px;
    // margin-bottom: 6px;
    background-image: url('@/assets/monitor/ready-header.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }

  &-content {
    box-sizing: border-box;
    width: 100%;
    height: 260px;
    padding: 20px 20px 20px 20px;
  }
}
</style>
